<template lang="pug">
  .clearfix
    Modal(
      v-model="isShowEmailNoticeModal"
      title="发送邮件提醒"
      width="1000"
      class-name="vertical-center-modal"
      :closable="false"
    )
      .clearfix.h500.overflow-y-scroll
        Form.ivu-row.has-rules-item2(ref="formData" :model="formData" :rules="rules" :label-width="120")
          FormItem.form-item.ivu-col.pr-20.mb-15(v-for="(item, index) of setFormItem" :label="item.label" :key="index" :class="item.style" :prop="item.prop" v-show="item.isShow")
            template(v-if="item.type === 'input'")
              Input(v-model="formData[item.model]" :placeholder="item.placeholder")
            template(v-if="item.type === 'select'")
              Select(v-model="formData[item.model]" :placeholder="item.placeholder" @on-change="(value) => handleSelectChange(value, item.model)")
                Option(v-for="(c_item, c_index) of arrListDown[item.options]" :key="c_index" :value="c_item.value") {{c_item.label}}
            template(v-if="item.type === 'datePicker'")
              DatePicker.w-100(v-model="formData[item.model]" placeholder="请选择" type="month" @on-change="handleChangeDatePicker(item.model, $event)")
            template(v-if="item.type === 'cascader'")
              Input(v-model="formData[item.model]" v-show="false")
              Cascader(v-model="formData[item.arrModel]" :data="arrListDown[item.options]" clearable @on-change="(value, selectedData) => handleTreeChange(value, selectedData, item.model)" :change-on-select="true")
                Input(type="text" icon="ios-arrow-down" :value="selectParentObj.label")
            template(v-if="item.type === 'textarea'")
              .pb-40
                Upload.pull-left.display-none(
                  ref="upload"
                  :on-success="uploadSuccess"
                  :show-upload-list="false"
                  :format="['jpg','jpeg','png']"
                  :action="uploadImgUrl"
                )
                  Button 上传
                .upgrade-notice-editor
                  quill-editor(
                    v-model="formData[item.model]"
                    ref="myQuillEditor"
                    :options="editorOption"
                  )

      .clearfix(slot="footer")
        Button(type="text" @click="cancel") 取消
        Button(type="primary" @click="handleSubmit") 确定
</template>

<script>
import { WorkDayPlanApi } from '@/api/WorkDayPlan.api.js'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import { quillEditor } from 'vue-quill-editor'

const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike'],
  ['blockquote', 'code-block'],
  [{ 'header': 1 }, { 'header': 2 }],
  [{ 'list': 'ordered' }, { 'list': 'bullet' }],
  [{ 'indent': '-1' }, { 'indent': '+1' }],
  [{ 'direction': 'rtl' }],
  [{ 'size': ['small', false, 'large', 'huge'] }],
  [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
  [{ 'color': [] }, { 'background': [] }],
  [{ 'font': [] }],
  [{ 'align': [] }],
  ['link', 'image']
]

export default {
  name: '',

  props: ['today', 'userId'],

  components: {
    quillEditor
  },

  computed: {
    setFormItem () {
      if (this.formData.eee == 'false') {
        return this.formItem.slice(0, 5)
      } else {
        return this.formItem
      }
    }
  },

  data () {
    return {
      isShowEmailNoticeModal: false,
      emailNoticeModalTitle: '',
      basicDataId: '',
      formData: {
        aaa: '',
        bbb: '',
        ccc: '',
        ddd: '',
        eee: 'false',
        fff: '',
        ggg: '',
        hhh: ''
      },
      formItem: [
        { type: 'cascader', label: '收件人', placeholder: '请输入收件人', prop: 'aaa', model: 'aaa', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'select', label: '是否携带附件', placeholder: '请选择是否携带附件', prop: 'bbb', model: 'bbb', style: 'ivu-col-span-12 is-required', options: 'booleanJudge', isShow: true, fn: 'handleSelectChange' },
        { type: 'input', label: '邮件标题', placeholder: '请输入邮件标题', prop: 'ccc', model: 'ccc', style: 'ivu-col-span-24 is-required', isShow: true },
        { type: 'textarea', label: '内容', placeholder: '请输入内容', prop: 'ddd', model: 'ddd', style: 'ivu-col-span-24', isShow: true },

        { type: 'select', label: '是否到期前提醒', placeholder: '请选择是否到期前提醒', prop: 'eee', model: 'eee', style: 'ivu-col-span-12 is-required', options: 'booleanJudge', isShow: true, fn: 'handleSelectChange' },
        { type: 'datePicker', label: '提醒时间', placeholder: '请输入提醒时间', prop: 'fff', model: 'fff', style: 'ivu-col-span-12 is-required', isShow: true },
        { type: 'input', label: '邮件标题', placeholder: '请输入邮件标题', prop: 'ggg', model: 'ggg', style: 'ivu-col-span-24 is-required', isShow: true },
        { type: 'textarea', label: '内容', placeholder: '请输入内容', prop: 'hhh', model: 'hhh', style: 'ivu-col-span-24', isShow: true }
      ],
      rules: {
      },
      arrListDown: {
        tempOps: [],
        booleanJudge: [{ value: 'true', label: '是' }, { value: 'false', label: '否' }],
        parentSource: []
      },
      uploadImgUrl: '/api/SysWelfarePercentAreaConfig/Import?type=2',
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions,
            handlers: {
              'image': function (value) {
                if (value) {
                  console.log('调用iview上传')
                  document.querySelector('.ivu-upload .ivu-btn').click()
                } else {
                  console.log('没有调用成功')
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      selectParentObj: {}
      // PSID: 'local'
    }
  },

  watch: {
  },

  mounted () {
  },

  methods: {
    cancel () {
      this.isShowEmailNoticeModal = false
    },

    show () {
      // this.isShowEmailNoticeModal = true
      this.$refs.formData.resetFields()
      console.log('点击是的show()')
    },

    uploadSuccess (res) {
      let quill = this.$refs.myQuillEditor.quill
      console.log(quill)
      if (res) { // 如果上传成功
        var tempImgUrl = res.result.successFiles[0].url
        console.log(tempImgUrl)
        let length = quill.getSelection().index
        quill.insertEmbed(length, 'image', tempImgUrl)
        quill.setSelection(length + 1)
      } else {
        console.log('插入图片失败')
      }
    },

    // 新建计划 提交表单
    async handleSubmit () {
      console.log('this.formData: ', this.formData)
      // let res = await WorkDayPlanApi.savePlan(params)
      // console.log('新建计划 提交表单res: ', res)
      // if (res.status === 200 && res.data.success) {
      //   this.$Message.success(res.data.message)
      //   this.isShowEmailNoticeModal = false
      //   this.$emit('query')
      // } else {
      //   this.$Message.error({
      //     content: res.data.message,
      //     // duration: 0,
      //     closable: true
      //   })
      // }
    },

    // 时间选择控件
    handleChangeDatePicker (model, val) {
      this.formData[model] = val
    },

    handleSelectChange (value, model) {
      console.log('model: ' + model + ', value: ' + value)
      // if (model === 'eee' && !value) {
      //   this.formItem[5].isShow = false
      // }
    }
  }
}
</script>

<style lang="scss">
.upgrade-notice-editor{
    height: 300px;
    padding-bottom: 44px;
    .quill-editor{
      height: 100%;
      .ql-toolbar{
        border-radius: 5px 5px 0 0;
        background-image: linear-gradient(0deg, #f4f4f4 0%, #fefefe 100%);
      }
      .ql-container{
        border-radius: 0 0 5px 5px;
        background: #fff;
      }
    }
  }
</style>
